<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <parent></parent>
    </div>
    <template id="temp">
        <div>
            <my-child1></my-child1>
            <my-child2></my-child2>
        </div>
    </template>

    <template id="uio">
        <div>
            <my-child3></my-child3>
            <my-child4></my-child4>
        </div>
    </template>
    <script type="text/javaScript"  charset="UTF-8" src="../JS文件/vue.js"></script>
    <script>
        var Child1 ={
            template:"<div><input type='text'></div>"
        }
        var Child2 = {
            template:"<div><input type='date'></div>"
        }
        var Child3 = {
            template:"<div><h1>这是新的内容4</h1></div>"
        }
        var Child4 = {
            template:"<div><h1>这是新的内容4</h1></div>"
        }
        Vue.component('parent',{
            components:{
                'my-child1':Child1,
                'my-child2':Child2
                },
                // components:{
                //    'my-child3':Child3,
                //    'my-child4':Child4
                // },
                template:'#temp',
                // template:'#uio'
        });
        var vm = new Vue({
            el:'#app',
        });
    </script>
</body>
</html>